@use './mixins.scss' as *;

// 全局重置样式
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: $font-size-md;
  line-height: 1.5;
  color: $text-primary;
  background-color: $bg-light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 通用工具类
.flex-center {
  @include flex-center;
}

.flex-between {
  @include flex-between;
}

.flex-column {
  @include flex-column;
}

.flex-column-center {
  @include flex-column-center;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-ellipsis {
  @include text-ellipsis;
}

// 间距工具类
.m-0 { margin: 0; }
.m-xs { margin: $spacing-xs; }
.m-sm { margin: $spacing-sm; }
.m-md { margin: $spacing-md; }
.m-lg { margin: $spacing-lg; }
.m-xl { margin: $spacing-xl; }

.p-0 { padding: 0; }
.p-xs { padding: $spacing-xs; }
.p-sm { padding: $spacing-sm; }
.p-md { padding: $spacing-md; }
.p-lg { padding: $spacing-lg; }
.p-xl { padding: $spacing-xl; }

// 按钮样式
.btn {
  @include button-base;
}

.btn-primary {
  @include button-primary;
}

.btn-secondary {
  @include button-secondary;
}

.btn-accent {
  @include button-accent;
}

.btn-outline {
  @include button-outline;
}

.btn-game {
  @include game-button;
}

.btn-sm {
  padding: $spacing-xs $spacing-sm;
  font-size: $font-size-sm;
}

.btn-lg {
  padding: $spacing-lg $spacing-xl;
  font-size: $font-size-lg;
}

// 卡片样式
.card {
  @include card;
}

.card-hover {
  @include card-hover;
}

// 等级徽章
.level-badge {
  &.bronze {
    @include level-badge($level-bronze);
  }
  
  &.silver {
    @include level-badge($level-silver);
  }
  
  &.gold {
    @include level-badge($level-gold);
  }
  
  &.platinum {
    @include level-badge($level-platinum);
  }
  
  &.diamond {
    @include level-badge($level-diamond);
  }
  
  &.master {
    @include level-badge($level-master);
  }
  
  &.grandmaster {
    @include level-badge($level-grandmaster);
  }
}

// 星级评分
.star-rating {
  @include star-rating;
}

// 模态框
.modal-overlay {
  @include modal-overlay;
}

.modal-content {
  @include modal-content;
}

// 加载动画
.loading-spinner {
  @include loading-spinner;
}

// 游戏特定样式
.game-container {
  width: 100%;
  height: 100vh;
  @include flex-column;
  background: linear-gradient(135deg, $bg-primary, $bg-secondary);
  color: $text-light;
}

.game-header {
  height: $header-height;
  @include flex-between;
  padding: 0 $spacing-md;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.game-content {
  flex: 1;
  @include flex-center;
  padding: $spacing-md;
}

.game-footer {
  height: $footer-height;
  @include flex-center;
  padding: 0 $spacing-md;
  background-color: rgba(0, 0, 0, 0.2);
}

// 迷宫样式
.maze-container {
  position: relative;
  background-color: $maze-wall-color;
  border: 2px solid $border-dark;
  border-radius: $border-radius-md;
  overflow: hidden;
}

.maze-cell {
  position: absolute;
  
  &.wall {
    background-color: $maze-wall-color;
  }
  
  &.path {
    background-color: $maze-path-color;
  }
  
  &.player {
    background-color: $maze-player-color;
    border-radius: $border-radius-round;
    z-index: 10;
  }
  
  &.target {
    background-color: $maze-target-color;
    border-radius: $border-radius-round;
    z-index: 5;
  }
  
  &.hint {
    background-color: $maze-hint-color;
    opacity: 0.7;
    z-index: 3;
  }
}

// 虚拟摇杆样式
.virtual-joystick {
  position: fixed;
  bottom: $spacing-xl;
  right: $spacing-xl;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: $border-radius-round;
  @include flex-center;
  
  .joystick-knob {
    width: 40px;
    height: 40px;
    background-color: $primary-color;
    border-radius: $border-radius-round;
    transition: all $transition-fast;
    box-shadow: $shadow-medium;
  }
}

// 等级选择网格
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: $spacing-md;
  padding: $spacing-md;
  max-width: 600px;
  margin: 0 auto;
}

.level-item {
  @include card-hover;
  @include flex-column-center;
  aspect-ratio: 1;
  cursor: pointer;
  position: relative;
  
  &.locked {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  &.completed {
    background: linear-gradient(135deg, $success-color, darken($success-color, 10%));
    color: $text-light;
  }
  
  .level-number {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    margin-bottom: $spacing-xs;
  }
  
  .level-stars {
    @include star-rating;
    
    .star {
      width: 16px;
      height: 16px;
    }
  }
}

// 响应式设计
@include mobile {
  .game-header {
    height: 50px;
    padding: 0 $spacing-sm;
  }
  
  .virtual-joystick {
    width: 100px;
    height: 100px;
    bottom: $spacing-lg;
    right: $spacing-lg;
    
    .joystick-knob {
      width: 32px;
      height: 32px;
    }
  }
  
  .level-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: $spacing-sm;
    padding: $spacing-sm;
  }
  
  .btn-game {
    font-size: $font-size-md;
    padding: $spacing-sm $spacing-lg;
  }
}

// 动画类
.fade-in {
  @include fade-in;
}

.slide-up {
  @include slide-up;
}

.bounce-in {
  @include bounce-in;
}

// 隐藏类
.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

.opacity-0 {
  opacity: 0;
}

// 禁用类
.disabled {
  opacity: $btn-disabled-opacity;
  pointer-events: none;
  cursor: not-allowed;
}